<template>
  <div class="row">
    <div class="col-md-8">
      <div class="brand_left hot_BJ">
        <div class="row">
          <div class="col-md-12">
            <div class="element-tabs">
              <el-tabs v-model="activeName" @tab-click="handleClick" >
                <el-tab-pane label="全部" name="Home" ></el-tab-pane>
                <el-tab-pane label="企业风采" name="second"></el-tab-pane>
                <el-tab-pane label="产品展示" name="third"></el-tab-pane>
                <el-tab-pane label="人才俱乐部" name="fourth"></el-tab-pane>
                <el-tab-pane label="人物专访" name="ActiveCooperation"></el-tab-pane>
              </el-tabs>

            </div>
          </div>
        </div>
        <div class="givenchy ">
          <div class="givenchy_time identical">
            <ul class="clearfix">
              <li>时间筛选：</li>
              <li
                v-for="(item ,index) in timeD"
                :class="{'timeactive':timecur === index}"
                @click="TimeItme(item,index)"
              >
                {{ item }}
              </li>
            </ul>
          </div>
          <div class="givenchy_PX identical">
            <ul class="clearfix ">
              <li>排序：</li>
              <li
                v-for="(item,index) in pxD"
                :class="{'timeactive':hotcur === index}"
                @click="HotItme(item,index)"
              >
                {{ item }}
              </li>
            </ul>
          </div>
        </div>
        <!--  -->
        <div v-for="item in signD">
          <router-link :to="{name:'PersonnelServiceDetail'}">
            <div class="givenchy_message" >
              <div class="massage_img">
                <img :src="item.img" alt="" />
              </div>
              <div class="massage_text">
                <h6 class="text-overflow">{{ item.title }}</h6>
                <p class="massage_read">
                      <span
                      ><i><img src="../../../../static/images/read.png" alt=""/></i
                      >{{ item.read }}阅读</span
                      >
                </p>
                <p>本公司拥有一支专业、高效的知识产权服务团队，包括专
                  问、专利代理人、商标代理人、专利工程师等。专利代理
                  队95%以上名校理工科硕士毕业...</p>
              </div>
            </div>
          </router-link>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="contribute" @click="dialogFormVisible = true">我要投稿</div>
      <div class="brand_right hot_BJ">
        <div class="consultation"><span>热门推荐</span></div>
        <div class="info-img-list">
          <ul class="info-img-item">
            <li>
              <div class="text-overflow">● 王山——稳步前行在困境中看到… </div>
              <span>2019-04-05</span>
            </li>
            <li>
              <div class="text-overflow">● 王山——稳步前行在困境中看到… </div>
              <span>2019-04-05</span>
            </li>
            <li>
              <div class="text-overflow">● 王山——稳步前行在困境中看到… </div>
              <span>2019-04-05</span>
            </li>
            <li>
              <div class="text-overflow">● 王山——稳步前行在困境中看到… </div>
              <span>2019-04-05</span>
            </li>
          </ul>

        </div>
      </div>
    </div>
    <el-dialog title="收货地址" :visible.sync="dialogFormVisible" center>
      <div slot="title">
      <span>我要投稿</span>
      </div>
      <div class="dialog-center">
        <div class="tip">
          <span>温馨提示：</span>
          如果您有好的文章，请下载模板，并将模板填好，发送至我们
          的邮箱
        </div>
        <div class="com-model">
          <ul>
            <li><span>如果您有企业风采需要投稿发布，请点击下载</span><span class="download">企业风采模板</span></li>
            <li><span>如果您有人物专访需要投稿发布，请点击下载</span><span class="download">企业风采模板</span></li>
            <li><span>如果您有人才俱乐部需要投稿发布，请点击下载</span><span class="download">企业风采模板</span></li>
          </ul>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
      <span>投稿发送至：1234569@qq.com</span>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "Home",
    data(){
      return{
        activeName: 'Home',
        dialogFormVisible: false,
        currentTabComponent:'Home',
        timecur: 0,
        hotcur: 0,
        timeD: ["不限", "最近一周", "最近一月"],
        pxD: ["时间", "热度"],
        signD: [
          {
            img: "../../../static/images/hd_p1.png",
            title: "债权路演对接会（第二期）",
            read: 473,
            time: "2019-04-09",
            hdtime: " 2019-04-24 14:00  ~  17:00",
            hdaddress: "江苏省-苏州市-工业园区",
            tense: "报名中",
            Endtense:""
          },
          {
            img: "../../../static/images/hd_p3.png",
            title: "债权路演对接会（第二期）",
            read: 473,
            time: "2019-04-09",
            hdtime: " 2019-04-24 14:00  ~  17:00",
            hdaddress: "江苏省-苏州市-工业园区",
            tense:"截止报名",
            Endtense: "截止报名"
          },
          {
            img: "../../../static/images/hd_p4.png",
            title: "债权路演对接会（第二期）",
            read: 473,
            time: "2019-04-09",
            hdtime: " 2019-04-24 14:00  ~  17:00",
            hdaddress: "江苏省-苏州市-工业园区",
            tense: "报名中",
            Endtense:""
          },
          {
            img: "../../../static/images/hd_p5.png",
            title: "债权路演对接会（第二期）",
            read: 473,
            time: "2019-04-09",
            hdtime: " 2019-04-24 14:00  ~  17:00",
            hdaddress: "江苏省-苏州市-工业园区",
            tense: "报名中",
            Endtense:""
          }
        ],
      }
    },
    methods: {
      // 时间筛选
      TimeItme(item, index) {
        this.timecur = index;
      },
      // 排序
      HotItme(item, index) {
        this.hotcur = index;
      },
      handleClick(tab, event) {
        this.currentTabComponent=tab.name
        console.log(tab.name, event);
      }
    }
  }
</script>

<style scoped>
  .givenchy_message .massage_text {
    width: calc(100% - 285px);
    padding: 0 20px;
  }
  .consultation{
    height: auto;
    border-bottom: 1px rgba(224,224,224,1) solid;
    padding-bottom: 10px;
  }
  .info-img-item{
    width: 300px;
    margin: 20px auto;
  }
  .info-img-item li{
    margin-bottom:  20px ;
  }
  .contribute{
    width: 100%;
    text-align: center;
    background:linear-gradient(0deg,rgba(21,117,249,1),rgba(47,193,247,1));
    padding: 20px 0;
    color: #ffffff;
    margin-bottom: 20px;

  }
  .dialog-center{
    margin: 20px auto;
  }
  .tip{
    width: 80%;
    padding: 20px;
    background: rgba(230,230,230,1);
    margin: 10px auto;
  }
  .com-model {
    width: 78%;
    margin: 20px auto;
  }
  .com-model ul li{
    display: flex;
    margin-bottom: 15px;
    justify-content: space-between;
    align-items: center;
  }
  .download {
    display: inline-block;
    background:linear-gradient(0deg,rgba(23,123,249,1) 0%,rgba(47,193,247,1) 100%);
    border-radius:4px;
    padding: 10px;

  }

  .Brand_introduction .brand_title{
    font-size: 20px;
    font-weight: 600;
    height: 50px;
    line-height: 50px;
    margin-bottom: 15px;
    color: #333333;
  }
  .brand_left,.brand_right{
    padding: 20px 10px ;
    border: solid 1px #e0e0e0;
    border-radius: 5px;
  }
  .givenchy{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100px;
    padding: 20px;
  }
  .identical li{
    float: left;
    padding: 0 10px;
    height: 30px;
  }
  .identical .timeactive{
    color: #1575f9;
  }
  .givenchy_message{
    height: 250px;
    border-bottom: 1px solid #e0e0e0;
  }
  .givenchy_message,.givenchy_message .massage_read{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .givenchy_message .massage_img{
    width: 247px;
  }
  .givenchy_message .massage_img img{
    width: 100%;
  }
  .givenchy_message .massage_text{width: calc(100% - 350px);padding: 0 20px;}
  .givenchy_message .massage_text p{
    color: #666666;
  }
  .givenchy_message .massage_text>h6{
    font-size: 20px;
    font-weight:600;
    color: #333333;
  }
  .givenchy_message .massage_read{
    font-size: 12px ;
    color: #999999;
  }
  .givenchy_message .massage_read i{
    width: 18px;
    height: 18px;
    display: inline-block;
    margin-right: 5px;
  }
  .givenchy_message .massage_read i img{
    width: 100%;
    height: 100%;
  }
  .givenchy_message .massage_btn{
    width: 120px;
  }
</style>
